import { Col, Row, Button, Checkbox, Form, Input, message } from 'antd';
import './login.scss'
//登录接口
import { login } from '../../api/http'
import { redirect, useNavigate } from 'react-router-dom';
import { useEffect, useRef } from 'react';

//定义验证密码的规则
const checkPw = (rule, value) => {
  if (value.length === 0) {
    return Promise.reject("密码不能为空")
  }
  if (/^[\da-z]{3,8}$/.test(value)) {
    return Promise.resolve()
  } else {
    return Promise.reject("密码应该是3-8位的数字或小写字母")
  }
}
export default function index() {
  const form = useRef()
  const navigate = useNavigate()
  useEffect(()=>{
    //处理记住账号逻辑 把localStorage数据拿到填充出来
    let account = localStorage.getItem("account")
    if (account){
      //  {account:'',pw:'', remember:''}
       account = JSON.parse(account)
       form.current.setFieldsValue(account)
    }
  },[])
  //成功调用
  const onFinish = (values) => {
    sessionStorage.setItem('token','111111111')
        navigate('/',{replace: true})
        //成功提示
        message.success('登录成功')
        //如果勾选了记住网站 下次登录会自动填充账号密码
        if (values.remember){
          localStorage.setItem("account",JSON.stringify(values))
        }else{
          localStorage.removeItem("account")
        }
  };
  //表单验证不通过调用
  const onFinishFailed = (errorInfo) => {
    message.warning('表单验证不通过')
    //清空表单
    form.current.resetFields()
    // console.log('Failed:', errorInfo);
  };
  return (
    <div>
      <Row className='cont-row'>
        <Col span={7} offset={8} className="cont-col">
          <Form
            name="basic"
            labelCol={{span: 5,}}
            wrapperCol={{span: 16,}}
            style={{maxWidth: 600,}}
            initialValues={{
              remember: true,
              account: '',
              pw: ''
            }}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            autoComplete="off"
            ref={form}
          >
            <Form.Item
              label="用户名"
              name="account"
              rules={[
                {
                  required: true,
                  message: '请输入用户名',
                },
                { pattern: /^\w{3,7}$/, message: '请输入长度为3-7的字符!' }
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="pw"
              rules={[
                { validator: checkPw },
                {
                  required: true,
                }
              ]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item
              name="remember"
              valuePropName="checked"
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Checkbox>Remember me</Checkbox>
            </Form.Item>

            <Form.Item
              wrapperCol={{
                offset: 1,
                span: 20,
              }}
            >
              <Button type="primary" htmlType="submit" className='tijiao'>
                登录
              </Button>
            </Form.Item>
          </Form>
        </Col>
      </Row>
    </div>
  )
}
